<template id='News'>
  <div class="News">
    <top-bar :isClick="isClick" />
    <div class="main">
      <div class="path1">
        <div class="title1Blue"></div>
        <div class="title1"></div>
        <!-- <div class="content1">
          <div class="leftPath">
            <div
              class="leftTop"
              v-if="topPath1.cover_img"
              :style="{ backgroundImage: `url(${topPath1.cover_img})` }"
              @click="goToDetail(topPath1)"
            >
              <div class="blur"></div>
              <div class="leftContent">
                <div class="date">
                  <div class="day">{{ topPath1.day }}</div>
                  <div class="month">{{ topPath1.monthEn }}</div>
                </div>
                <div class="text">
                  <div class="title">{{ topPath1.title }}</div>
                  <div class="desc">
                    {{ topPath1.desc }}
                  </div>
                </div>
              </div>
            </div>
            <div class="leftBottom">
              <div
                class="leftBottomLeft"
                v-if="topPath2.cover_img"
                :style="{ backgroundImage: `url(${topPath2.cover_img})` }"
                @click="goToDetail(topPath2)"
              >
                <div class="day">
                  {{ topPath2.year }}/{{ topPath2.month }}/{{ topPath2.day }}
                </div>
                <div class="headline">{{ topPath2.title }}</div>
              </div>
              <div
                class="leftBottomRight"
                v-if="topPath3.cover_img"
                :style="{ backgroundImage: `url(${topPath3.cover_img})` }"
                @click="goToDetail(topPath3)"
              >
                <div class="day">
                  {{ topPath3.year }}/{{ topPath3.month }}/{{ topPath3.day }}
                </div>
                <div class="headline">{{ topPath3.title }}</div>
              </div>
            </div>
          </div>
          <div class="rightPath">
            <div class="tab">
              <div class="control">
                <div
                  :class="{ isClick: topTab == item.id }"
                  class="tabItem"
                  v-for="(item, index) in topListTab"
                  :key="index"
                  @click="changeTopTab(item)"
                >
                  <span> {{ item.name }}</span>
                </div>
              </div>
              <div class="content">
                <template v-for="(item, index) in topListTab">
                  <div
                    class="contentMain"
                    v-if="topTab == item.id"
                    :key="index"
                  >
                    <div
                      class="contentGroup"
                      :class="[
                        { isShowContent: topTab == item.id },
                        { isHiddenContent: topTab != item.id },
                      ]"
                    >
                      <div
                        class="contentItem"
                        v-for="(element, location) in topPath4"
                        :key="location"
                        @click="goToDetail(element)"
                      >
                        <div class="leftItem">
                          <div class="day">{{ element.day }}</div>
                          <div class="date">
                            {{ element.year }}/{{ element.month }}
                          </div>
                        </div>
                        <div class="rightItem">
                          <div class="title">{{ element.title }}</div>
                          <div class="desc">{{ element.desc }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="path2">
        <div class="path2Tab">
          <!-- <div class="control">
            <div
              :class="{ isClick: centerTab == item.id }"
              class="controlItem"
              v-for="(item, index) in topListTab"
              :key="index"
              @click="changeCenterTab(item)"
            >
              <div class="name">{{ item.name }}</div>
            </div>
          </div> -->
        </div>
        <!-- <div class="pathToast">
          <span @click="goTohome"> HOME</span> >
          <span>NEWS AND TRENDS </span> ><span class="currentPath">{{
            type
          }}</span>
        </div> -->
        <div class="pathTable">
          <template v-for="(item, index) in topListTab">
            <div
              v-if="centerTab == item.id"
              class="tableContent"
              :key="index"
              :class="[
                { isShowTable: centerTab == item.id },
                { isHiddenTable: centerTab != item.id },
              ]"
            >
              <div
                class="tableItem"
                v-for="(element, location) in tableList"
                :key="location"
                @click="goToDetail(element)"
              >
                <div class="headIcon">
                  <b-img :src="element.cover_img" fluid></b-img>
                </div>
                <div class="textContent">
                  <div class="headline">{{ element.title }}</div>
                  <div class="date">{{ element.ctime }}</div>
                  <div class="desc">{{ element.desc }}</div>
                </div>
                <div class="right"></div>
              </div>
            </div>
          </template>
        </div>
        <div class="page">
          <div class="totalPage">
            total <span>{{ rows }}</span> items
          </div>
          <b-pagination
            v-model="currentPage"
            :total-rows="rows"
            :per-page="perPage"
            align="center"
            :hide-goto-end-buttons="true"
            @change="chosePage"
          >
          </b-pagination>
          <div class="toPage">
            <span>Go to</span>
            <input
              type="text"
              class="goInput"
              placeholder="Page"
              v-model="pageNumber"
              @keyup.enter="goToPage"
            />
            <button class="btn" type="button" @click="goToPage">Go</button>
          </div>
        </div>
      </div>
    </div>
    <bottom-bar />
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar.vue";
import TopBar from "../../components/TopBar.vue";
import { isPositiveInteger, iscode, changeMonth } from "../../tools/index";
import { getTopInfoApi, getNewsListApi } from "../../assets/api/index";
export default {
  name: "News",
  components: {
    BottomBar,
    TopBar,
  },
  data() {
    return {
      type: "announcement",
      isClick: 4,
      topTab: 1,
      topPath1: {},
      topPath2: {},
      topPath3: {},
      topPath4: [],
      topList: [],
      topListTab: [
        { id: 1, name: "Official announcement" },
        // { id: 2, name: "News and information" },
        // { id: 3, name: "Industry development" },
      ],
      centerTab: 1,
      pageNumber: "",
      rows: 7,
      perPage: 7,
      currentPage: 1,
      tableList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    async getTopInfo() {
      let result = await getTopInfoApi({
        type: this.topTab,
      });
      if (iscode(result)) {
        this.topList = result.data.topnewslist;
        let date = [];
        this.topPath4 = [];
        this.topList.map((item, index) => {
          date = item.ctime.split(" ");
          date[0].split("-").map((element, location) => {
            if (location == 0) {
              this.$set(item, "year", element);
            } else if (location == 1) {
              this.$set(item, "month", element);
              this.$set(item, "monthEn", changeMonth(element));
            } else if (location == 2) {
              this.$set(item, "day", element);
            }
          });
          if (index >= 3 && index <= 7) {
            this.topPath4.push(item);
          }
        });
        this.topPath1 = this.topList[0];
        this.topPath2 = this.topList[1];
        this.topPath3 = this.topList[2];
      }
    },
    changeTopTab(item) {
      this.topTab = item.id;
      this.getTopInfo();
    },
    async getNewsList() {
      let result = await getNewsListApi({
        type: this.centerTab,
        page: this.currentPage,
        pagesize: this.perPage,
      });
      if (iscode(result)) {
        this.tableList = result.data.list;
        this.rows = result.data.count;
      }
    },
    changeCenterTab(item) {
      this.type = item.name;
      this.centerTab = item.id;
      this.currentPage = 1;
      this.getNewsList();
    },
    goToDetail(item) {
      this.$router.push({
        path: "/newsDetail",
        query: {
          id: item.id,
        },
      });
    },
    chosePage(e) {
      this.currentPage = e;
      this.getNewsList();
    },
    goToPage() {
      if (this.pageNumber) {
        if (isPositiveInteger(this.pageNumber) && this.pageNumber != 0) {
          let totalPage = parseInt(this.rows / 7);
          if (this.rows % 7 > 0) {
            totalPage++;
          }
          if (this.pageNumber <= totalPage) {
            this.currentPage = this.pageNumber;
            this.getNewsList();
          }
          this.pageNumber = "";
        } else {
          this.pageNumber = "";
        }
      }
    },
    goTohome() {
      this.$router.push("/");
    },
  },

  created() {},

  mounted() {
    this.getNewsList();
    this.getTopInfo();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang='less' scoped>
.News {
  background-color: #000;
  user-select: none;
  padding-top: 128px;
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 244px;
    .path1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      .title1Blue {
        background: url("../../assets/images/news/blue1.png");
        background-size: 100% 100%;
        width: 1118px;
        height: 166px;
        margin-top: 19px;
      }
      .title1 {
        background: url("../../assets/images/news/title1.png");
        background-size: 100% 100%;
        width: 1137px;
        height: 160px;
        margin-top: -82px;
        margin-bottom: 0px;
      }
      .content1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .leftPath {
          margin-right: 10px;
          -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1)
            both;
          animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
          @-webkit-keyframes fade-in {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }
          @keyframes fade-in {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }
          .leftTop {
            cursor: pointer;
            background-size: 100% 100%;
            width: 671px;
            height: 329px;
            position: relative;
            .blur {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 388px;
              height: 164px;
              background: #0f0f0f;
              opacity: 0.55;
              -webkit-filter: blur(5px);
              filter: blur(5px);
            }
            .leftContent {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 388px;
              height: 164px;
              z-index: 1;
              padding: 19px;
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              .date {
                background: url("../../assets/images/news/line.png");
                background-size: 100% 100%;
                width: 60px;
                height: 60px;
                box-sizing: border-box;
                position: relative;
                margin-right: 19px;
                .day {
                  position: absolute;
                  top: -15px;
                  left: 0;
                  font-size: 28px;
                  font-weight: 600;
                  color: #fff;
                }
                .month {
                  position: absolute;
                  bottom: 0;
                  right: 0;
                  font-size: 16px;
                  color: rgba(255, 255, 255, 0.7);
                }
              }
              .text {
                flex: 1;
                overflow: hidden;
                .title {
                  font-size: 16px;
                  color: #fff;
                  font-weight: 500;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                .desc {
                  font-size: 16px;
                  color: rgba(255, 255, 255, 0.7);
                  max-height: 89px;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
            }
          }
          .leftTop:hover {
            -webkit-animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            @-webkit-keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
            @keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
          }
          .leftBottom {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1)
              both;
            animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            .leftBottomLeft {
              cursor: pointer;
              background-size: 100% 100%;
              width: 331px;
              height: 234px;
              padding: 21px;
              position: relative;
              margin-right: 10px;
              .day {
                position: absolute;
                bottom: 46px;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.7);
              }
              .headline {
                position: absolute;
                bottom: 13px;
                font-size: 16px;
                color: #fff;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 80%;
              }
            }

            .leftBottomRight {
              cursor: pointer;
              background-size: 100% 100%;
              width: 331px;
              height: 234px;
              padding: 21px;
              position: relative;
              .day {
                position: absolute;
                bottom: 46px;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.7);
              }
              .headline {
                position: absolute;
                bottom: 13px;
                font-size: 16px;
                color: #fff;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 80%;
              }
            }
            .leftBottomLeft:hover,
            .leftBottomRight:hover {
              -webkit-animation: tracking-in-expand 1.2s
                cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
              animation: tracking-in-expand 1.2s
                cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
              @-webkit-keyframes tracking-in-expand {
                0%,
                100% {
                  opacity: 1;
                }
                50% {
                  opacity: 0.4;
                }
              }
              @keyframes tracking-in-expand {
                0%,
                100% {
                  opacity: 1;
                }
                50% {
                  opacity: 0.4;
                }
              }
            }
          }
        }
        .rightPath {
          flex: 1;
          height: 573px;
          .tab {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .control {
              height: 100%;
              width: 240px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-right: 10px;
              .tabItem {
                cursor: pointer;
                flex: 1;
                width: 240px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-size: 16px;
                color: #fff;
                font-weight: 600;
                background: #303030;
                span {
                  max-width: 160px;
                }
              }
              .tabItem:hover {
                -webkit-animation: pulsate-bck 2s ease-in-out infinite both;
                animation: pulsate-bck 2s ease-in-out infinite both;
                @-webkit-keyframes pulsate-bck {
                  0%,
                  100% {
                    -webkit-box-shadow: inset 0 0 30px 0px
                      rgba(255, 255, 255, 0.75);
                    box-shadow: inset 0 0 30px 0px rgba(255, 255, 255, 0.75);
                  }
                  50% {
                    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
                    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
                  }
                }
                @keyframes pulsate-bck {
                  0%,
                  100% {
                    -webkit-box-shadow: inset 0 0 30px 0px
                      rgba(255, 255, 255, 0.75);
                    box-shadow: inset 0 0 30px 0px rgba(255, 255, 255, 0.75);
                  }
                  50% {
                    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
                    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
                  }
                }
              }
              .isClick {
                color: #438dee;
                -webkit-box-shadow: inset 0 0 30px 0px rgba(0, 0, 0, 1);
                box-shadow: inset 0 0 30px 0px rgba(0, 0, 0, 1);
              }
            }
            .content {
              height: 100%;
              display: flex;
              .contentMain {
                height: 100%;
                .contentGroup {
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  .contentItem {
                    cursor: pointer;
                    flex: 1;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-bottom: 10px;
                    .leftItem {
                      width: 88px;
                      background: #181818;
                      text-align: center;
                      margin-right: 10px;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      .day {
                        color: #fff;
                        font-size: 32px;
                        font-weight: 500;
                        margin-bottom: 3px;
                      }
                      .date {
                        font-size: 16px;
                        color: rgba(255, 255, 255, 0.7);
                      }
                    }
                    .rightItem {
                      flex: 1;
                      background: #181818;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      padding-left: 10px;
                      padding-right: 50px;
                      .title {
                        font-size: 17px;
                        font-weight: 500;
                        color: #fff;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-bottom: 3px;
                      }
                      .desc {
                        font-size: 18px;
                        color: rgba(255, 255, 255, 0.7);
                        word-break: break-all;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                      }
                    }
                  }
                  .contentItem:hover {
                    -webkit-animation: tracking-in-expand 1.2s
                      cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
                    animation: tracking-in-expand 1.2s
                      cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
                    @-webkit-keyframes tracking-in-expand {
                      0%,
                      100% {
                        opacity: 1;
                      }
                      50% {
                        opacity: 0.4;
                      }
                    }
                    @keyframes tracking-in-expand {
                      0%,
                      100% {
                        opacity: 1;
                      }
                      50% {
                        opacity: 0.4;
                      }
                    }
                  }
                  .contentItem:last-child {
                    margin-bottom: 0;
                  }
                }
                .isShowContent {
                  -webkit-animation: fade-in 1.2s
                    cubic-bezier(0.39, 0.575, 0.565, 1) both;
                  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1)
                    both;
                  @-webkit-keyframes fade-in {
                    0% {
                      opacity: 0;
                    }
                    100% {
                      opacity: 1;
                    }
                  }
                  @keyframes fade-in {
                    0% {
                      opacity: 0;
                    }
                    100% {
                      opacity: 1;
                    }
                  }
                }
                .isHiddenContent {
                  -webkit-animation: fade-out 1s ease-out both;
                  animation: fade-out 1s ease-out both;
                  @-webkit-keyframes fade-out {
                    0% {
                      opacity: 1;
                    }
                    100% {
                      opacity: 0;
                    }
                  }
                  @keyframes fade-out {
                    0% {
                      opacity: 1;
                    }
                    100% {
                      opacity: 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .path2 {
      margin-top: 64px;

      width: 100%;
      .path2Tab {
        .control {
          height: 92px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #434343;
          color: #fff;
          font-size: 26px;
          font-weight: 600;
          .controlItem {
            cursor: pointer;
            height: 90%;
            padding: 0 15px;
            // margin-left: 120px;
            .name {
              height: 100%;
              display: flex;
              align-items: center;
            }
          }
          .controlItem:hover {
            -webkit-animation: shadow-out 2s ease-in-out infinite both;
            animation: shadow-out 2s ease-in-out infinite both;
            @-webkit-keyframes shadow-out {
              0%,
              100% {
                -webkit-box-shadow: 0px 0px 12px #00a0ff;
                box-shadow: 0px 0px 12px #00a0ff;
              }
              50% {
                -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
                box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              }
            }
            @keyframes shadow-out {
              0%,
              100% {
                -webkit-box-shadow: 0px 0px 12px #00a0ff;
                box-shadow: 0px 0px 12px #00a0ff;
              }
              50% {
                -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
                box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              }
            }
          }
          .isClick {
            // border-bottom: 4px solid #00a0ff;
            -webkit-box-shadow: 0px 0px 12px #00a0ff;
            box-shadow: 0px 0px 12px #00a0ff;
          }
        }
      }
      .pathToast {
        margin: 30px 0;
        display: flex;
        align-items: center;
        span {
          color: rgba(255, 255, 255, 0.5);
          font-size: 17px;
          margin: 0 5px;
          display: block;
        }
        .currentPath {
          margin-left: 5px;
          color: #fff;
          font-size: 17px;
        }
        span:first-child {
          margin-left: 0;
          cursor: pointer;
        }
        span:first-child:hover {
          color: #438dee;
          -webkit-animation: tracking-in-expand 1.2s
            cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
          animation: tracking-in-expand 1.2s cubic-bezier(0.215, 0.61, 0.355, 1)
            infinite both;
          @-webkit-keyframes tracking-in-expand {
            0%,
            100% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.4;
            }
          }
          @keyframes tracking-in-expand {
            0%,
            100% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.4;
            }
          }
        }
      }
      .pathTable {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        margin-bottom: 10px;
        .tableContent {
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          .tableItem {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 18px;
            padding-right: 28px;
            background: #303030;
            margin-bottom: 18px;
            cursor: pointer;
            .headIcon {
              margin-right: 25px;
              img {
                width: 324px;
                height: 240px;
              }
            }
            .textContent {
              height: 240px;
              display: flex;
              flex-direction: column;
              margin-right: auto;
              flex: 1;
              padding-right: 98px;
              .headline {
                font-size: 26px;
                color: #fff;
                font-weight: 600;
              }
              .date {
                font-size: 22px;
                color: #fff;
                font-weight: 500;
                margin: 15px 0;
              }
              .desc {
                font-size: 18px;
                // line-height: 25px;
                color: rgba(255, 255, 255, 0.7);
                word-break: break-all;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
              }
            }
            .right {
              background: url("../../assets/images/news/right.png");
              background-size: 100% 100%;
              width: 14px;
              height: 25px;
              -webkit-animation: shake-horizontal 6s
                cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
              animation: shake-horizontal 6s
                cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
              @-webkit-keyframes shake-horizontal {
                0%,
                100% {
                  -webkit-transform: translateX(0);
                  transform: translateX(0);
                }
                10%,
                30%,
                50%,
                70%,
                90% {
                  -webkit-transform: translateX(-5px);
                  transform: translateX(-5px);
                }
                20%,
                40%,
                60%,
                80% {
                  -webkit-transform: translateX(5px);
                  transform: translateX(5px);
                }
              }
              @keyframes shake-horizontal {
                0%,
                100% {
                  -webkit-transform: translateX(0);
                  transform: translateX(0);
                }
                10%,
                30%,
                50%,
                70%,
                90% {
                  -webkit-transform: translateX(-5px);
                  transform: translateX(-5px);
                }
                20%,
                40%,
                60%,
                80% {
                  -webkit-transform: translateX(5px);
                  transform: translateX(5px);
                }
              }
            }
          }
          .tableItem:hover {
            -webkit-animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            @-webkit-keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
            @keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
          }
        }
        .isShowTable {
          -webkit-animation: slide-in-top 0.5s
            cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          @-webkit-keyframes slide-in-top {
            0% {
              -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
              opacity: 0;
            }
            100% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
            }
          }
          @keyframes slide-in-top {
            0% {
              -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
              opacity: 0;
            }
            100% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
            }
          }
        }
        .isHiddenTable {
          -webkit-animation: slide-out-top 0.5s
            cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.5s both;
          animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
            0.5s both;
          @-webkit-keyframes slide-out-top {
            0% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
            }
            100% {
              -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
              opacity: 0;
            }
          }
          @keyframes slide-out-top {
            0% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
            }
            100% {
              -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
              opacity: 0;
            }
          }
        }
      }
      .page {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 105px;
        .pagination {
          margin: 0;
          /deep/.page-item {
            .page-link {
              font-size: 22px;
              background: #000;
              color: #fff;
              padding: 19px 38px;
              border: none;
            }
            .page-link:focus {
              box-shadow: 0px 0px 10px #438dee;
            }
          }
          /deep/ .active {
            .page-link {
              color: #438dee;
            }
          }
        }
        .toPage {
          display: flex;
          align-items: center;
          justify-items: center;
          .goInput {
            margin: 0 20px;
            width: 80px;
            height: 35px;
            text-align: center;
            background: #000;
            color: #fff;
          }
          .btn {
            padding: 19px 38px;
            font-size: 22px;
            border-radius: 0;
          }
          .btn:focus {
            color: #fff;
            box-shadow: 0px 0px 10px #438dee;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .News {
    .main {
      padding: 0 40px;
      .path1 {
        .title1Blue {
          width: 745px;
          height: 110px;
          margin-top: 0;
        }
        .title1 {
          width: 758px;
          height: 106px;
          margin-top: -40px;
          margin-bottom: 0px;
        }
        .content1 {
          justify-content: center;
          .leftPath {
            margin-right: 0;
            width: 100%;
            .leftTop {
              width: 100%;
              height: 355px;
              // width: 559px;
              // height: 274px;
              .leftContent {
                // height: auto;
                .text {
                  .desc {
                    -webkit-line-clamp: 4;
                  }
                }
              }
            }
            .leftBottom {
              .leftBottomLeft {
                width: 49.5%;
                margin-right: 1%;
                // width: 275px;
                // height: 195px;
              }
              .leftBottomRight {
                width: 49.5%;
                // width: 275px;
                // height: 195px;
              }
            }
          }
          .rightPath {
            height: 480px;
            display: none;
            .tab {
              .control {
                margin-right: 0;
                width: 100%;
                .tabItem {
                  flex: 1;
                  width: 100%;
                  span {
                    // max-width: none;
                  }
                }
              }
              .content {
                // display: none;
              }
            }
          }
        }
      }
      .path2 {
        margin-top: 34px;
        .path2Tab {
          .control {
            padding: 0 5px;
            .controlItem {
              .name {
                text-align: center;
              }
            }
          }
        }
        .pathTable {
          .tableContent {
            .tableItem {
              .textContent {
                padding-right: 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                .headline {
                  line-height: 38px;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  font-size: 32px;
                }
                .date {
                  margin: 5px 0;
                  font-size: 27px;
                }
                .desc {
                  font-size: 23px;
                  line-height: 28px;
                  -webkit-line-clamp: 5;
                }
              }
            }
          }
        }
        .page {
          margin-bottom: 80px;
          .totalPage {
            display: none;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 375px) {
  .News {
    .main {
      .path1 {
        .content1 {
          .rightPath {
            .tab {
              .control {
                .tabItem {
                  span {
                    max-width: none;
                  }
                }
              }
            }
          }
        }
      }
      .path2 {
        .path2Tab {
          .control {
            padding: 0 5px;
            .controlItem {
              .name {
                text-align: center;
              }
            }
          }
        }
        .pathTable {
          .tableContent {
            .tableItem {
              .textContent {
                .desc {
                  // -webkit-line-clamp: 3;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>